<template>
    <div id="addressSelect">
        <div class="header">
            <van-nav-bar title="不凡" left-text="返回" left-arrow @click-left="onClickLeft" />
        </div>
        <div class="content">
            <div class="address">
                <div class="addcont">
                    <div class="item">
                        <div class="list" v-for="(item,index) in addressListData" :key="index">
                            <div class="addresslist">
                                <div>
                                    <p>{{item.name}}</p>
                                    <div v-if="item.is_default" class="moren">默认</div>
                                </div>
                                <div class="info" @click="delAddress(item.id)">
                                    <p>{{item.mobile}}</p>
                                    <p>{{item.address + item.address_detail}}</p>
                                </div>
                                <div @click="modifyAddress(item.id)"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bottom">
                    <div @click="addAddress">+新增地址</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { getListAction } from "@/api/address";
export default {
    data() {
        return {
            openId: "",
            addressListData: [],
        };
    },
    created() {
        this.openId = localStorage.getItem("openId");
        this.getaddressList();
    },
    methods: {
        onClickLeft() {
            this.$router.go(-1);
        },
        async getaddressList() {
            const data = await getListAction({
                openId: this.openId,
            });
            console.log(data);
            this.addressListData = data.data;
            console.log(this.addressListData);
        },
        delAddress(id){
            localStorage.setItem('addressId',id);
            this.$router.go(-1)
        },
        modifyAddress(id){
            console.log(id);
            this.$router.push('/pages/addaddress?id='+id)
        },
        addAddress(){
            this.$router.push('/pages/addaddress')
        }
    },
};
</script>
<style lang="scss" scoped>
#addressSelect {
    height: 100vh;
    background: #f4f4f4;
    border-top: 1px solid transparent;
    font-size: 0.32rem;
    padding-bottom: 1.333333rem;
    .header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 999;
    }
    .content {
        background-color: #fff;
        height: calc(100vh - 1.24rem);
        margin-top: 1.22667rem;
        overflow: auto;
        border-top: 0.01333rem solid transparent;
        .address {
            height: calc(100% - 1.73333rem);
            display: flex;
            flex-direction: column;
            background: #fff;
            overflow: auto;
            box-sizing: border-box;
            .addcont {
                height: 100%;
                .item {
                    padding: 0 0.26667rem;
                    .list {
                        position: relative;
                        padding: 0.4rem 0;
                        border-bottom: 1px solid #d9d9d9;
                        .addresslist {
                            width: 100%;
                            position: relative;
                            transition: all 0.3s ease;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            :first-child {
                                width: 1.33333rem;
                                text-align: center;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                align-self: flex-start;
                                .moren {
                                    width: 0.8rem;
                                    height: 0.4rem;
                                    border: 1px solid #b4282d;
                                    text-align: center;
                                    line-height: 0.4rem;
                                    color: #b4282d;
                                    margin: 0.13333rem auto 0 auto;
                                }
                            }
                            .info {
                                padding: 0 0.26667rem;
                                flex: 1;
                                text-align: left;
                            }
                            :nth-child(3) {
                                width: 0.66667rem;
                                height: 0.66667rem;
                                margin: 0 0.26667rem;
                                background: url("../../../assets/images/edit.png")
                                    no-repeat;
                                background-size: 100% 100%;
                            }
                        }
                    }
                }
            }
            .bottom {
                position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
                padding: 0.4rem 0.4rem;
                display: flex;
                justify-content: space-between;
                background: #fff;
                div {
                    width: 90%;
                    height: 0.93333rem;
                    line-height: 0.93333rem;
                    text-align: center;
                    border: 1px solid #b4282d;
                    color: #b4282d;
                    margin: 0 auto;
                }
            }
        }
    }
}
</style>